import EmptyProduct from '@/components/EmptyProduct';
import utils from '@/utils';
import { useShowLoading } from '@/utils/hooks/useShowLoading';
import { View } from '@tarojs/components';
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import ListEnd from '../../../giftCardSubPack/giftCardDetail/listEnd';
import { ProductItem } from '../productItem';
import './index.scss';

const ProductRecommend = ({
  loading,
  dispatch,
  recommendProductList,
  recommendProductListFinished,
  sort,
}) => {
  useShowLoading(loading);

  // 获取店铺推荐商品
  // 这里用 新品 代替
  useEffect(() => {
    dispatch({
      type: 'productList/getRecommendByOrg',
      payload: { pageSize: 20, sort },
    });
  }, []);

  // 获取不到 推荐商品
  if (recommendProductListFinished && !recommendProductList?.length) {
    return (
      <EmptyProduct
        txt="该商户暂无商品哟～"
        style={{
          height: utils.getCalcHeight('100vh', 232, 120),
        }}
      />
    );
  }

  // 有推荐商品
  return (
    <View className="ProductFilter-ProductRecommend">
      <View className="recommend-notice">
        <View className="txt">没有找到商品，以下是为您推荐的本店其他商品</View>
      </View>

      <ProductItem
        goodsList={recommendProductList}
        onClick={(product) => {
          utils.goGoodDetail(product, dispatch);
        }}
      />

      <ListEnd />
    </View>
  );
};

export default connect(({ loading, productList }) => ({
  loading,

  recommendProductList: productList.recShopProductList,
  recommendProductListFinished: productList.recShopProductFinished,
}))(ProductRecommend);
